import * as React from 'react';
import * as moment from 'moment';
import { Popover, Form, Button, TimePicker, Input } from 'antd';

interface EditWordTimeProps {
  form: any;
  onOk: (data: any) => any;
  onCancel: () => any;
  onVisibleChange: () => any;
  editWord: any;
}

class EditWordTime extends React.Component<EditWordTimeProps> {
  static FORMAT = 'mm:ss';
  static defaultProps: EditWordTimeProps = {
    onOk: () => {},
    onCancel: () => {},
    onVisibleChange: () => {},
    form: null,
    editWord: null,
  };

  componentDidMount() {
    this.initFormValue();
  }

  handleFormReset = () => {
    this.props.form.resetFields();
  };

  initFormValue() {
    const { form, editWord } = this.props;
    const { start, end } = editWord;
    if (start) {
      const [mm, ss, ms] = start.split(':');
      form.setFieldsValue({
        startTime: {
          mmss: moment(mm + ':' + ss, EditWordTime.FORMAT),
          ms,
        },
      });
    }
    if (end) {
      const [mm, ss, ms] = end.split(':');
      form.setFieldsValue({
        endTime: {
          mmss: moment(mm + ':' + ss, EditWordTime.FORMAT),
          ms,
        },
      });
    }
  }

  handleSubmit = (e: any) => {
    e.preventDefault();

    const { form, onOk } = this.props;

    form.validateFields((err: any, values: any) => {
      if (err) return;

      const { startTime, endTime } = values;
      const startMs = startTime['ms'] ? startTime['ms'] : '00';
      const endMs = endTime['ms'] ? endTime['ms'] : '00';
      const start = startTime['mmss'].format('mm:ss') + ':' + startMs;
      const end = endTime['mmss'].format('mm:ss') + ':' + endMs;

      onOk({ start, end });
    });
  };

  render() {
    const { onVisibleChange, form } = this.props;
    const { getFieldDecorator } = form;

    const content = (
      <Form className="ant-form-inline" onSubmit={this.handleSubmit}>
        <Form.Item label="开始时间">
          {getFieldDecorator('startTime.mmss', {
            rules: [
              {
                required: true,
                message: '开始时间是必填项',
              },
            ],
          })(<TimePicker defaultOpenValue={moment('00:00', EditWordTime.FORMAT)} />)}
        </Form.Item>
        <Form.Item>{getFieldDecorator('startTime.ms')(<Input placeholder="毫秒" />)}</Form.Item>
        <br />
        <Form.Item label="结束时间">
          {getFieldDecorator('endTime.mmss', {
            rules: [
              {
                required: true,
                message: '结束时间是必填项',
              },
            ],
          })(<TimePicker defaultOpenValue={moment('00:00', EditWordTime.FORMAT)} />)}
        </Form.Item>
        <Form.Item>{getFieldDecorator('endTime.ms')(<Input placeholder="毫秒" />)}</Form.Item>
        <br />
        <br />
        <Form.Item>
          <Button size="default" type="primary" htmlType="submit">
            保存
          </Button>
          <Button
            className="mg-l-10"
            size="default"
            htmlType="reset"
            onClick={this.handleFormReset}>
            重置
          </Button>
          <Button
            className="mg-l-10"
            size="default"
            htmlType="button"
            onClick={(e: any) => {
              e.stopPropagation();
              this.props.onCancel();
            }}>
            取消
          </Button>
        </Form.Item>
      </Form>
    );

    return (
      <Popover
        trigger="click"
        placement="top"
        content={content}
        title="编辑时间轨迹"
        visible={true}
        arrowPointAtCenter={true}
        autoAdjustOverflow={true}
        onVisibleChange={onVisibleChange}
      />
    );
  }
}

export default Form.create()(EditWordTime);
